<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Logistic通运网</title>
    <!-- Bootstrap core CSS -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="container">
    <div style="height: 110px; margin-top: 22px">
        <h2 style="display: inline-block">Logistic通运网</h2>&nbsp;&nbsp;<h2 style="display: inline-block">欢迎登录</h2>
    </div>
</div>
<div style="background-color: rgb(56,135,190); width: 100%; height: 545px">
    <div class="container">
        <div class="row">
            <div class="col-md-6" style="">
                <img src="../images/frontLogIn.png">
            </div>
            <div class="col-md-6" style="background-color: white; width: 400px; height: 400px; margin-top: 70px; margin-left: 50px">
                <h3 style="margin-top: 40px; margin-left: 30px">登录</h3>
                <form autocomplete="off" method="post" action="/logisticsPlatform/logInAfter" style="padding-top: 30px; margin-left: 30px; margin-right: 30px" onsubmit="return checkAccount();">
                    <div class="form-group">
                        <input id="account" name="clientAccount" style="width: 302px; height: 42px" type="text" class="form-control" placeholder="请输入账号" required autofocus>
                    </div>
                    <div class="form-group">
                        <input name="clientPassword" style="width: 302px; height: 42px" type="password" class="form-control" placeholder="password" required>
                    </div>
                    <div class="form-group">
                        <button style="width: 302px; height: 40px;" class="btn btn-primary btn-block" type="submit">登录</button>
                    </div>
                    <!--<a id="forgetPass" style="text-decoration: none">忘记密码</a>-->
                    <a style="text-decoration: none;" href="/">不登录,随便逛逛</a>
                    <a class="register blue" style="text-decoration: none; margin-right:8px; float: right" href="/clientRegister">免费注册</a>
                </form>
            </div>
        </div>

        <footer class="footer " style="text-align: center">
            <p class="text-muted" style="font-size: 12px; margin-top: 20px">© 2018 通运网 中国互联网举报中心京ICP证1401号京ICP备125439号-3京公网安备</p>
        </footer>

    </div>
</div>


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../jquery-3.3.1.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
    $("#forgetPass").click(function () {
        $.ajax({
            url: "/checkAccount",
            data: {"account" : document.getElementById("account").value},
            success: function (data) {
                var clientEmailValue = data.data.clientEmail;
                window.open("/forgetPassword?clientEmail="+clientEmailValue);
            }
        })
    })
</script>
<script>
    function checkAccount() {
        var accountValue = $("#account").val();
        $.ajax({
            url: "/checkAccount",
            async: false,   //异步提交可以用于阻止表单提交，结合下方event阻止事件
            data: {"account" : accountValue},
            success: function (data) {
                if (data.data === null) {
                    // console.log(data.data);
                    alert("该用户名不存在!");
                    if (event.preventDefault) {
                        event.preventDefault();
                    } else {
                        event.returnValue = false;
                    }
                }
                else return true;
            }
        })
    }
</script>
</body>
</html>